import { WidgetDataModel } from '@/components/Widgets'
import { cloneDeep } from 'lodash'
import store from '@/mixins/store'

export default {
  data() {
    return {
      generateType: store.generateType,
      makingChart: store.makingChart,
      generateChart: store.generateChart
    }
  },
  props: {
    // 生成页面时，外部注入的配置
    config: {
      type: Object,
      default: () => {}
    }
  },

  inject: {
    flag: { default: 'Making' },
    templateFlag: { default: false }
  },

  computed: {
    // 制作数据
    mTemplateConfig: {
      get() {
        return this.makingChart.templateConfig
      },
      set(newValue) {
        this.makingChart.templateConfig = newValue
      }
    },
    mCompInfos: {
      get() {
        return this.mTemplateConfig.compInfos
      },
      set(newValue) {
        this.mTemplateConfig.compInfos = newValue
      }
    },
    mTempInfos: {
      get() {
        return this.mTemplateConfig.tempInfos
      },
      set(newValue) {
        this.mTemplateConfig.tempInfos = newValue
      }
    },
    // 生成数据
    gTemplateConfig: {
      get() {
        return this.generateChart.templateConfig
      },
      set(newValue) {
        this.generateChart.templateConfig = newValue
      }
    },
    gCompInfos: {
      get() {
        return this.gTemplateConfig.compInfos
      },
      set(newValue) {
        this.gTemplateConfig.compInfos = newValue
      }
    },
    gTempInfos: {
      get() {
        return this.gTemplateConfig.tempInfos
      },
      set(newValue) {
        this.gTemplateConfig.tempInfos = newValue
      }
    },
    // 最终使用数据
    templateConfig() {
      if (this.flag === 'Making') return this.mTemplateConfig
      return this.gTemplateConfig
    },
    compInfos() {
      return this.templateConfig.compInfos
    },
    tempInfos() {
      return this.templateConfig.tempInfos
    }
  },

  created() {
    this.init()
  },

  methods: {
    // widgetDataModel覆盖defaultConfig
    updateWidgets(compInfos) {
      compInfos.forEach(widget => {
        const dataModel = cloneDeep(WidgetDataModel[widget['type']])

        this.$set(widget, 'selectStatus', false)
        this.updateWidget(dataModel, widget)
      })
    },

    updateWidget(dataModel, widget) {
      for (var key in dataModel) {
        if (typeof dataModel[key] === 'object' && widget[key]) {
          this.updateWidget(dataModel[key], widget[key], key)
        } else {
          // 如果没有该项就赋值
          if (widget[key] === undefined) {
            // 响应式数据
            this.$set(widget, key, dataModel[key])
          }
        }
      }
    },

    // 外部config覆盖defaultConfig
    updateDefaultConfig(compInfos) {
      compInfos.forEach(configWidget => {
        const defaultWidget = this.$w(configWidget.genId)
        if (defaultWidget) {
          this.updateWidgetConfig(defaultWidget, configWidget)
        }
      })
    },

    updateWidgetConfig(defaultWidget, configWidget) {
      for (var key in configWidget) {
        if (
          typeof configWidget[key] === 'object' &&
          JSON.stringify(configWidget[key] !== '{}')
        ) {
          this.updateWidgetConfig(defaultWidget[key], configWidget[key])
        } else {
          // 响应式数据
          this.$set(defaultWidget, key, configWidget[key])
        }
      }
    },

    // 更新配置
    updateConfig() {
      // 外部注入的配置覆盖原配置
      if (this.config) {
        // 先更新tempInfos信息，寻找到对应模板
        if (['Making'].includes(this.flag)) {
          this.mTemplateConfig.tempInfos = this.config.tempInfos
        }
        if (['Generate'].includes(this.flag)) {
          this.gTemplateConfig.tempInfos = this.config.tempInfos
        }
        // 第一次更新，config覆盖defaultConfig
        if (this.defaultConfig) {
          this.updateDefaultConfig(this.config.compInfos)
        }
      }

      // 第二次更新，widgetDataModel覆盖defaultConfig
      if (this.defaultConfig) {
        // 按需更新数据
        this.updateWidgets(this.defaultConfig.compInfos)

        // 赋值到Store公共变量
        if (['Making'].includes(this.flag)) {
          this.mTemplateConfig = this.defaultConfig
        }
        if (['Generate'].includes(this.flag)) {
          this.gTemplateConfig = this.defaultConfig
        }
      }
    },

    // 获取组件实例
    $vm(id) {
      return this.$refs[id].getInstance()
    },

    // 获取组件配置信息
    $w(genId) {
      const widget = this.defaultConfig.compInfos.filter(widget => {
        return widget.genId === genId
      })[0]

      return widget
    },

    init() {
      if (['Generate'].includes(this.flag)) {
        this.updateConfig()
      } else if (['Making'].includes(this.flag) && this.templateFlag) {
        this.updateConfig()
      }
    }
  }
}
